<template>
	<!-- 表格标头编辑对话框	 -->
	<el-dialog title="编辑相应字段规则" :visible.sync="isEditable" :center="true" width="98%" @open="opendDialog" @close="closeDialog" :close-on-click-modal="false">
		<!-- 导航栏 -->
		<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>{{navInfo.workflowName}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{navInfo.reportName}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-row>
        	<el-col :lg="10">
				<!-- 编辑表头字段 -->
				<el-transfer filterable :props="{key: 'fieldId'}" :filter-method="filterMethod" filter-placeholder="请输入字段名" v-model="fieldData" :titles="fieldTitle" @change="handleChange" :data="data"></el-transfer>
			</el-col>
			<el-col :lg="14">
				<!-- 字段属性编辑  -->
				<el-table :data="filedTableData" border highlight-current-row height="303" size="mini" v-loading="listLoading" :fit="true" :show-overflow-tooltip="true" :stripe="true">
					<el-table-column type="index" align="center" width="35" ></el-table-column>
					<el-table-column prop="fieldId" align="center" label="标识"></el-table-column>
					<el-table-column prop="label" label="名称"></el-table-column>

					<el-table-column align="center" label="宽度">
						<template scope="scope">
							<span v-show="!scope.row.isedit">{{scope.row.width}}</span>
							<el-input v-show="scope.row.isedit" v-model.number="scope.row.width"></el-input>
						</template>
					</el-table-column>

					<el-table-column align="center" label="对齐状态">
						<template scope="scope">
							<span v-show="!scope.row.isedit">{{scope.row.align}}</span>
							<el-select v-show="scope.row.isedit" v-model="scope.row.align" size="small">
								<el-option label="左侧" value="left"></el-option>
								<el-option label="居中" value="center"></el-option>
								<el-option label="右侧" value="right"></el-option>
							</el-select>
						</template>
					</el-table-column>

					<el-table-column prop="sortable" label="排序状态">
						<template scope="scope">
							<span v-show="!scope.row.isedit">{{scope.row.sortable}}</span>
							<el-tooltip v-show="scope.row.isedit" :content="'激活状态：' + scope.row.sortable" placement="top">
								<el-switch size="small" v-model="scope.row.sortable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
							</el-tooltip>
						</template>
					</el-table-column>
					<!-- 表格操作工具栏 -->
					<el-table-column label="操作" align="center" width="150">
						<template scope="scope">
							<!-- 韩内编辑 -->
							<el-button :type="!scope.row.isedit ? 'primary' : 'success'" size="small" @click="handleRowEdit(scope.$index, scope.row)">{{!scope.row.isedit ? '编辑' : '确定'}}</el-button>	
							<el-button type="info" v-show="scope.row.isedit" size="small" @click="cancelRowEdit(scope.$index, scope.row)">取消</el-button>	

							<!-- 删除提示tooltip -->
							<el-popover ref="popoverDelete" placement="top"  v-model="scope.row.visible">
								<p>确定要删除这条数据吗?</p>
								<div style="text-align: center;">
									<el-button size="mini" type="success" @click="scope.row.visible = false">取消</el-button>
									<el-button size="mini" type="danger" @click="handleRowDel(scope.$index, scope.row)">确定</el-button>
								</div>
								<el-button type="danger" v-show="!scope.row.isedit" size="small" slot="reference" @click="scope.row.visible = true">删除</el-button>
							</el-popover>
						</template>
					</el-table-column>
					<!-- 表格操作工具栏 End-->
				</el-table>
			</el-col>
		</el-row>
		
		<el-row>
			<!-- 报表预览列表 -->
			<el-table :data="tableData" border highlight-current-row size="mini" :stripe="true" @header-dragend="headerSizeChange">
				<el-table-column type="index" min-width="40" align="center" ></el-table-column>
				<el-table-column v-for="item in fieldHeader" :min-width="item.width" :prop="item.fieldName" :label="item.label" :align="item.align" :sortable="item.sortable"></el-table-column>
			</el-table>
			<!-- 报表预览列表 End-->
		</el-row>

		<el-row>
			<!-- 报表排序列表 -->
			<draggable v-model="filedTableData" @end="tabelSort">
				<el-tag v-for="item in filedTableData" >{{item.label}}</el-tag>
			</draggable>
			<!-- 报表排序列表 End-->
		</el-row>
		
		<!-- 对话框底部工具栏 -->
		<span slot="footer" class="dialog-footer">
			<el-button type="info" @click="cancelEdit">取消</el-button>
			<el-button type="primary" @click="finishedEdit">确定</el-button>
		</span>
		<!-- 对话框底部工具栏 End-->
	</el-dialog>
</template>

<script>
	import draggable from 'vuedraggable'

	export default {
		name: 'tableHeaderDialog',
		props: ['isConfigField', 'configRow'],
		data(){
			return {
				// 激活对话框编辑状态
				isEditable: this.isConfigField,
				navInfo: this.configRow,

				// 表格加载动画
				listLoading: false,	

				// 穿梭框筛选标题
				fieldTitle: ['未显示字段', '已显示字段'],
				// 显示数据
				data: [],
				// 操作结果数据
				fieldData: [],

				// 字段属性表格
				filedTableData: [],
				// 字段属性表格行内编辑状态
				isEdit: false,
				// 字段编辑属性缓存
				cacheRows: {},

				// 表格动态显示标题
				fieldHeader: [],
				// 表格数据
				tableData: [],

			}
		},
		mounted: function(){
			console.log('isEditable:' + this.isEditable);
			console.log(this.configRow);
			console.log(this.fieldHeader);
			console.log(this.fieldHeaderBase);
		},
		components: {
			'draggable': draggable
		},
		methods: {
			// 获得配置数据
			tabelSort: function(){
				var result = [];
				console.log("result:  " + this.fieldData);
				this.filedTableData.forEach((element, index) => {
					for (let i = 0, len = this.data.length; i <= len - 1; i++){
						if (element.fieldId == this.data[i].fieldId){
							this.data[i].display = true;
							this.data[i].dsporder = index;
							console.log(JSON.stringify(this.data[i]) + "       \n i: " + i + " \n index: " + index);
							result.push(this.data[i]);
						}
					}
				});

				// 更新字段表格数据
				this.filedTableData = result;
				// 更新预览表格表头数据
				this.fieldHeader = result;
				console.log(this.fieldHeader);
			},

			/* 对话框操作 */
			// 激活对话框处理
			opendDialog: function(){
				this.$http.post('/api/report/field', {reportId: this.navInfo.id}, {emulateJSON: true}).then(response => {
					// 处理穿梭框数据
					this.data = response.data || [];
					var result = this.data.filter(obj => {
						if (obj.display){
							this.fieldData.push(obj.fieldId);
							return true;
						}
					});
					this.filedTableData = result;
					this.fieldHeader = result;	
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 关闭对话框->清空数据
			closeDialog: function(){
				this.tableData.splice(0, this.tableData.length);
				this.fieldData.splice(0, this.fieldData.length);
				this.fieldHeader.splice(0, this.fieldHeader.length);
				this.filedTableData.splice(0, this.filedTableData.length);

			},
			// 查询条件
			filterMethod(query, item){
				return item.label.indexOf(query) > -1;
			},

			// 取消编辑
			cancelEdit: function(){
				this.isEditable = false;
			},
			// 完成编辑
			finishedEdit: function(){
				this.$http.post('/api/report/field/save', {reportId: this.navInfo.id, fieldData: this.data}).then(response => {
					this.isEditable = false;
					this.$notify({
						title: '成功',
						message: '数据已成功帮你保存，你可以继续进行你的low操作！',
						type: 'success'
					});
				}, response => {
					this.$notify({
						title: '错误',
						message: '服务器它出问题了，这锅我不背！',
						type: 'error'
					});
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			/* 对话框操作 End*/

			// 穿梭框数据变化
			handleChange: function(value, direction, movedKeys){

				// var result = this.data.filter(obj => {
				// 	for (let i = 0, len = this.fieldData.length; i <= len - 1; i++){
				// 		if (obj.fieldId == this.fieldData[i]){
				// 			obj.display = true;
				// 			return true;
				// 		}
				// 	}
				// });
				
				// 重置所有显示状态
				for (let i = 0, len = this.data.length; i <= len - 1; i++){
					this.data[i].display = false;
					this.data[i].dsporder = -1;
				}
				

				var result = [];
				console.log("result:  " + this.fieldData);
				this.fieldData.forEach((element, index) => {
					for (let i = 0, len = this.data.length; i <= len - 1; i++){
						if (element == this.data[i].fieldId){
							this.data[i].display = true;
							this.data[i].dsporder = index;
							console.log(JSON.stringify(this.data[i]) + "       \n i: " + i + " \n index: " + index);
							result.push(this.data[i]);
						}
					}
				});

				// 更新字段表格数据
				this.filedTableData = result;
				// 更新预览表格表头数据
				this.fieldHeader = result;
				console.log(this.fieldHeader);
			},

			/* 行内编辑 */
			// 编辑行内数据
			handleRowEdit: function(index, row){
				// 缓存操作前数据
				this.cacheRows[index] = JSON.parse(JSON.stringify(row));
				console.log('row:' + row);
				console.log('cache' + this.cacheRows[index]);
				row.isedit = !row.isedit;
			},
			// 取消行内编辑数据
			cancelRowEdit: function(index, row){
				// 获取缓存数据
				var cache = this.cacheRows[index];
				console.log("cancel:" + cache);
				// 还原原始操作数据
				row.width = cache.width;
				row.align = cache.align;
				row.sortable = cache.sortable;
				// 删除缓存数据
				delete this.cacheRows[index];
				row.isedit = false;
			},
			// 删除字段表格数据
			handleRowDel: function(index, row){
				row.visible = false;
				row.display = false;
				this.filedTableData.splice(index, 1);
				this.fieldData.splice(index, 1);
			},
			/* 行内编辑 End*/

			/* 报表预览操作 */
			// 改变表头大小
			headerSizeChange: function(newWith, oldWith, column, event){
				// 同步表头属性宽度
				this.fieldHeader.filter(obj => {
					console.log(obj.fieldName, column.property);
					if (obj.fieldName === column.property){
						obj.width = column.width;
						console.log(obj.width);
						return false;
					}
				});
			}
			/* 报表预览操作 End*/
		},
		watch: {
			// 监听父组件configRow数据变化
			'configRow': function(value){
				this.navInfo = value;
				console.log(value);
			},
			// 监听父组件isConfigField状态
			'isConfigField': function(value){
				this.isEditable = value;
			},
			// 监听子组件isEditable状态
			'isEditable': function(value){
				// 通知父组件更新状态
				this.$emit('update:isConfigField', value);
			}
		}
	}
</script>

<style>
	.el-button+.el-button{
		margin-left: 0 !important;
	}
	.el-table th.is-hidden>*{
		/*visibility: visible !important;*/
	}
	.el-row{
		margin-bottom: 20px;
	}
</style>